<template>
	<view class="profile-container">
		<view class="user-header">
			<view class="avatar-box" @click="editUserInfo">
				<image class="avatar" src="/static/logo.png" mode="aspectFill"></image>
				<view class="edit-avatar">
					<text class="edit-icon">✏️</text>
				</view>
			</view>
			<text class="username">{{userInfo.username || '测试用户'}}</text>
			<text class="user-id">ID: {{userInfo.userId || '10086'}}</text>
		</view>
		
		<view class="stats-box">
			<view class="stat-item">
				<text class="stat-value">{{completedRecordings || 0}}</text>
				<text class="stat-label">已完成录音</text>
			</view>
			<view class="stat-divider"></view>
			<view class="stat-item">
				<text class="stat-value">{{remainingTasks || 0}}</text>
				<text class="stat-label">剩余任务</text>
			</view>
		</view>
		
		<view class="menu-list">
			<view class="menu-item" @click="navigateTo('/pages/recordings/recordings')">
				<view class="menu-icon">🎙️</view>
				<text class="menu-text">我的录音</text>
				<text class="menu-arrow">></text>
			</view>
			
			<view class="menu-item" @click="editUserInfo">
				<view class="menu-icon">👤</view>
				<text class="menu-text">修改个人信息</text>
				<text class="menu-arrow">></text>
			</view>
		</view>
		
		<button class="logout-btn" @click="handleLogout">退出登录</button>
		
		<view class="pattern-decoration top-left"></view>
		<view class="pattern-decoration top-right"></view>
		<view class="pattern-decoration bottom-left"></view>
		<view class="pattern-decoration bottom-right"></view>
	</view>
</template>

<script>
	import { recordingAPI, sentenceAPI } from '../../utils/api.js';
	
	export default {
		data() {
			return {
				userInfo: {
					username: '测试用户',
					userId: '10086'
				},
				completedRecordings: 0,
				remainingTasks: 0,
				loading: false
			}
		},
		onShow() {
			// 每次显示页面时获取最新数据
			this.getUserInfo();
			this.getRecordingStats();
		},
		methods: {
			getUserInfo() {
				// 从本地存储获取用户信息
				const userInfoStr = uni.getStorageSync('userInfo');
				if (userInfoStr) {
					try {
						this.userInfo = JSON.parse(userInfoStr);
					} catch (e) {
						console.error('解析用户信息失败', e);
					}
				}
			},
			getRecordingStats() {
				this.loading = true;

				// 使用新的进度接口获取统计数据
				sentenceAPI.getProgress()
					.then(res => {
						console.log('获取进度统计成功:', res);
						if (res.code === 200) {
							this.completedRecordings = res.data.completed || 0;
							this.remainingTasks = res.data.pending || (res.data.total - res.data.completed) || 0;
							console.log('已完成:', this.completedRecordings, '剩余:', this.remainingTasks);
						} else {
							console.error('获取统计数据失败，错误码:', res.code, '错误信息:', res.message);
							uni.showToast({
								title: res.message || '获取统计数据失败',
								icon: 'none'
							});
						}
					})
					.catch(err => {
						console.error('获取统计数据失败', err);
						// 如果新接口失败，尝试使用旧接口作为备用
						recordingAPI.getUserStats()
							.then(res => {
								if (res.code === 200) {
									this.completedRecordings = res.data.completed || 0;
									this.remainingTasks = res.data.remaining || 0;
								}
							})
							.catch(err2 => {
								console.error('备用接口也失败', err2);
							});
					})
					.finally(() => {
						this.loading = false;
					});
			},
			navigateTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			editUserInfo() {
				uni.navigateTo({
					url: '/pages/userinfo/userinfo'
				});
			},
			handleLogout() {
				uni.showModal({
					title: '提示',
					content: '确定要退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							// 清除登录状态和缓存
							uni.removeStorageSync('userInfo');
							uni.removeStorageSync('token');
							
							uni.reLaunch({
								url: '/pages/login/login'
							});
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.profile-container {
		position: relative;
		min-height: 100vh;
		background-color: #D3E0F3; // 淡青色背景
		padding: 30rpx;
		padding-bottom: 120rpx; // 为底部导航留出空间
	}
	
	.user-header {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 40rpx 0;
		
		.avatar-box {
			position: relative;
			margin-bottom: 20rpx;
			
			.avatar {
				width: 160rpx;
				height: 160rpx;
				border-radius: 80rpx;
				border: 4rpx solid #D1D9E0; // 淡灰蓝色边框
			}
			
			.edit-avatar {
				position: absolute;
				right: 0;
				bottom: 0;
				width: 50rpx;
				height: 50rpx;
				background-color: #7397AB; // 淡蓝色
				border-radius: 25rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 2rpx solid #D1D9E0; // 淡灰蓝色边框
				
				.edit-icon {
					font-size: 24rpx;
				}
			}
		}
		
		.username {
			font-size: 36rpx;
			color: #7397AB; // 淡蓝色
			font-weight: bold;
			margin-bottom: 10rpx;
		}
		
		.user-id {
			font-size: 24rpx;
			color: rgba(115, 151, 171, 0.8);
		}
	}
	
	.stats-box {
		display: flex;
		justify-content: space-around;
		background-color: rgba(255, 255, 255, 0.95);
		border-radius: 20rpx;
		padding: 30rpx 0;
		margin-bottom: 30rpx;
		border: 3rpx solid #D1D9E0; // 淡灰蓝色边框
		
		.stat-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			
			.stat-value {
				font-size: 36rpx;
				color: #7397AB; // 淡蓝色
				font-weight: bold;
				margin-bottom: 10rpx;
			}
			
			.stat-label {
				font-size: 24rpx;
				color: #666;
			}
		}
		
		.stat-divider {
			width: 1rpx;
			background-color: #eee;
		}
	}
	
	.menu-list {
		background-color: rgba(255, 255, 255, 0.95);
		border-radius: 20rpx;
		overflow: hidden;
		margin-bottom: 40rpx;
		border: 3rpx solid #D1D9E0; // 淡灰蓝色边框
		
		.menu-item {
			display: flex;
			align-items: center;
			padding: 30rpx;
			border-bottom: 1rpx solid #eee;
			
			&:last-child {
				border-bottom: none;
			}
			
			.menu-icon {
				margin-right: 20rpx;
				font-size: 36rpx;
			}
			
			.menu-text {
				flex: 1;
				font-size: 28rpx;
				color: #333;
			}
			
			.menu-arrow {
				color: #999;
				font-size: 28rpx;
			}
		}
	}
	
	.logout-btn {
		height: 90rpx;
		line-height: 90rpx;
		background: linear-gradient(135deg, #7397AB, #A1AFC9); // 淡蓝色渐变
		color: #fff;
		font-size: 32rpx;
		border-radius: 45rpx;
		border: 2rpx solid #D1D9E0; // 淡灰蓝色边框
	}
	
	// 新疆传统花纹装饰
	.pattern-decoration {
		position: absolute;
		width: 150rpx;
		height: 150rpx;
		background-image: radial-gradient(circle, #7397AB 10%, transparent 30%),
						  radial-gradient(circle, #7397AB 10%, transparent 30%);
		background-size: 40rpx 40rpx;
		background-position: 0 0, 20rpx 20rpx;
		opacity: 0.5;
		z-index: -1;
	}
	
	.top-left {
		top: 20rpx;
		left: 20rpx;
	}
	
	.top-right {
		top: 20rpx;
		right: 20rpx;
		transform: rotate(90deg);
	}
	
	.bottom-left {
		bottom: 120rpx; // 为底部导航留出空间
		left: 20rpx;
		transform: rotate(270deg);
	}
	
	.bottom-right {
		bottom: 120rpx; // 为底部导航留出空间
		right: 20rpx;
		transform: rotate(180deg);
	}
</style> 